<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <van-nav-bar title="科普" left-text="返回" left-arrow @click="onClickLeft" />

    <div class="van-nav-head">
      <van-tabs v-model:active="active" type="card">
        <van-tab title="脾气">
          <div class="van-tab" @click="Htmlexpert">
            <div class="van-tab-ta">硬脾气</div>
            <div class="van-tab-tb">
              硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别
              硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别
            </div>
            <div class="van-tab-tc">
              <p class="van-tab-left">
                <span>图文</span>
              </p>
              <p class="van-tab-right">
                <span>阅读995</span>
                <span>赞20</span>
              </p>
            </div>
          </div>

          <div class="van-tab">
            <div class="van-tab-ta">硬脾气</div>
            <div class="van-tab-tb">
              硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别
              硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别
            </div>
            <div class="van-tab-tc">
              <p class="van-tab-left">
                <span>图文</span>
              </p>
              <p class="van-tab-right">
                <span>阅读995</span>
                <span>赞20</span>
              </p>
            </div>
          </div>

          <div class="van-tab">
            <div class="van-tab-ta">硬脾气</div>
            <div class="van-tab-tb">
              硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别
              硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别
            </div>
            <div class="van-tab-tc">
              <p class="van-tab-left">
                <span>图文</span>
              </p>
              <p class="van-tab-right">
                <span>阅读995</span>
                <span>赞20</span>
              </p>
            </div>
          </div>

          <div class="van-tab">
            <div class="van-tab-ta">硬脾气</div>
            <div class="van-tab-tb">
              硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别
              硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别
            </div>
            <div class="van-tab-tc">
              <p class="van-tab-left">
                <span>图文</span>
              </p>
              <p class="van-tab-right">
                <span>阅读995</span>
                <span>赞20</span>
              </p>
            </div>
          </div>

          <div class="van-tab">
            <div class="van-tab-ta">硬脾气</div>
            <div class="van-tab-tb">
              硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别
              硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别硬皮病的诊断标准及鉴别
            </div>
            <div class="van-tab-tc">
              <p class="van-tab-left">
                <span>图文</span>
              </p>
              <p class="van-tab-right">
                <span>阅读995</span>
                <span>赞20</span>
              </p>
            </div>
          </div>
        </van-tab>
        <van-tab title="语音">
          <van-empty description="无内容">
          </van-empty>
        </van-tab>
        <van-tab title="简答">


          <button @click="Pang">评论图片</button>

        </van-tab>
        <van-tab title="图文">图文</van-tab>
      </van-tabs>

      <div class="van-nav-head-top"></div>
      <div></div>
    </div>
  </div>
</template>
  
  <script setup lang='ts'>
const onClickLeft = () => history.back();
import { useRouter } from 'vue-router';
const router = useRouter();
const Htmlexpert = ()=>{
  router.push('/Htmlexpert')
}


const Pang = () => {
  router.push('/Pang');
};

</script>

<style scoped lang="scss" setup >
* {
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.van-nav-head {
  height: 100%;
  width: 100%;
  // background-color: pink;
  // display: flex;
  padding: 10px;

  .van-tab {
    height: 100px;
    width: 100%;
    // background-color: yellow;
    border-bottom: 3px solid #000;
    display: block;
    margin-bottom: 5px;

    .van-tab-ta {
      height: 30px;
      width: 100%;
      // background-color: red;
      line-height: 30px;
    }

    .van-tab-tb {
      position: relative;
      line-height: 1.5em; /* 假设行高为1.5em */
      height: 3em; /* 假设显示3行，3*1.5em = 4.5em */
      overflow: hidden;
      .van-tab-tb:after {
        content: '...';
        position: absolute;
        bottom: 0;
        right: 0;
        background-color: white; /* 与文本所在元素背景色相同 */
      }
    }

    .van-tab-tc {
      height: 30px;
      width: 100%;
      // background-color: orange;
      line-height: 30px;
      .van-tab-left {
        float: left;
      }
      .van-tab-right {
        float: right;
        span {
          padding: 0 10px;
        }
      }
    }
  }
}
</style>
